<template>
	<div class="foSi14" style="padding: 20px;">
		<div style="heighr: 10px;"></div>
		<div class="limit-filter" style="">
			<div class="foSi12 hei20" style="color: #787878;">评价时间</div>
			<div class="dis disAl hei40">
				<div class="time-group mar-right10">
					<span class="cuPo" :class="search.time === 1?'curr':''" @click.stop="timeClick(1)">本月</span>
					<span class="cuPo" :class="search.time === 3?'curr':''" @click.stop="timeClick(3)">最近3个月</span>
					<span class="cuPo" :class="search.time === 6?'curr':''" @click.stop="timeClick(6)">最近6个月</span>
				</div>
				<el-date-picker v-model="search.start" style="width: 140px;" type="date" size="small" placeholder="开始时间"
					:picker-options="{disabledDate:dateOptions}" @change="listChange" />
				<el-date-picker v-model="search.end" class="mar-left10" style="width: 140px;" type="date" size="small"
					placeholder="截止时间" :picker-options="{disabledDate:dateOptions}" @change="listChange" />
			</div>
			<div class="dis mar-top10">
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">课程类型</div>
					<div class="dis hei40">
						<el-select v-model="search.state" style="width: 140px" size="small">
							<el-option v-for="(item,index) in stateList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">课程</div>
					<div class="dis hei40">
						<el-select v-model="search.courseId" style="width: 140px" size="small">
							<el-option v-for="(item,index) in courseList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">老师</div>
					<div class="dis hei40">
						<el-select v-model="search.activities_id" style="width: 140px" size="small">
							<el-option v-for="(item,index) in activities" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">排序规则</div>
					<div class="dis hei40">
						<el-select v-model="search.sort" style="width: 140px" size="small">
							<el-option v-for="(item,index) in sortList" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12 hei20" style="color: #787878;">评分</div>
					<div class="dis hei40">
						<el-select v-model="search.mark" style="width: 140px" size="small">
							<el-option v-for="(item,index) in markList" :key="index" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
				</div>
				<div>
					<el-button type="primary" size="small" @click.stop="listChange()" class="bac6b7 mar-top20">查询</el-button>
				</div>
			</div>
		</div>
		<div class="mar-top20 dis disAl hei40" style="border-bottom: 1px solid #d9d9d9;">
			<el-checkbox v-model="search.checkbox" @click="checkClick">只看有留言</el-checkbox>
			<span class="mar-left5">共</span>
			<span style="color: #6b7cdd;margin: 0 2px;">0</span>
			<span>条评价（有留言0条）,</span>
			<span style="color: #6b7cdd;margin: 0 2px;">0</span>
			<span>人评价过</span>
		</div>
		<!-- <div class="course-evaluate-statistics">
			<span class="mar-right30" style="#787878">：</span>
			<span class="mar-right30 cuPo" :class="search.mark === 0?'curr1':''" @click.stop="markClick(0)">全部</span>
			<span class="mar-right30 cuPo" :class="search.mark === 5?'curr1':''" @click.stop="markClick(5)">5分(0)</span>
			<span class="mar-right30 cuPo" :class="search.mark === 4?'curr1':''" @click.stop="markClick(4)">4分(0)</span>
			<span class="mar-right30 cuPo" :class="search.mark === 3?'curr1':''" @click.stop="markClick(3)">3分(0)</span>
			<span class="mar-right30 cuPo" :class="search.mark === 2?'curr1':''" @click.stop="markClick(2)">2分(0)</span>
			<span class="cuPo" :class="search.mark === 1?'curr1':''" @click.stop="markClick(1)">1分(1)</span>
		</div> -->
		<div v-if="total === 0" class="m-empty-box" style="border-bottom: 1px solid #e6ebf5;">
			<div class="mar" style="width: 168px;height: 180px;">
				<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100" />
			</div>
			<div class="title">暂无数据</div>
		</div>
		<div v-for="(item,index) in list" :key="index" class="evaluate-list dis">
			<div style="min-width: 128px;">
				<div class="avatar">
					<img :src="item.member_avatar" class="wh100" />
				</div>
				<span>{{item.member_name}}</span>
			</div>
			<div class="wid100">
				<div class="hei20 dis disAl mar-bott10">
					<span style="color: #6b7cdd;">评分：</span>
					<span v-for="(item2,index2) in 5" :key="index2" class="mar-left5" style="width: 20px;height: 20px;">
						<img v-if="(index2+1) <= Number(item.course_score)" src="../../icons/png/star-c-fill.png"
							class="wh100" />
						<img v-else src="../../icons/png/star-c-empty.png" class="wh100" />
					</span>
				</div>
				<div class="comment">{{item.comment}}</div>
				<div class="dis disAl disJuB" style="color: #838383;">
					<div>{{item.course_name}} - {{item.coach_name}} {{item.course_time}} 开课</div>
					<div>评论于{{item.create_time}}</div>
				</div>
			</div>
		</div>
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getVenue
	} from '@/api/venue'
	export default {
		name: 'courseEvaluate',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 0
				},
				markList: [
					{id: 0, name: '全部'},{id: 1, name: '1分'},{id: 2, name: '2分'},
					{id: 3, name: '3分'},{id: 4, name: '4分'},{id: 5, name: '5分'}
				],
				sortList: [{id: 0, name: '全部'},{id: 1, name: '正序'},{id: 2, name: '逆序'}],
				stateList: [{
					value: 0,
					label: '全部'
				}, {
					value: 1,
					label: '团课'
				}, {
					value: 3,
					label: '私教课'
				}, {
					value: 2,
					label: '精品课'
				}],
				courseList: [],
				activities: [],
				search: {
					time: null,
					start: null,
					end: null,
					checkbox: true,
					state: 0,
					sort: 0,
					mark: 0,
					courseId: null,
					activities_id: 0
				},
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			]),
		},
		created() {
			var xuanList = [{
				name: '课程评价',
				url: '/course/courseEvaluate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getVen()
			this.getLastThreeMonthDate(0)
		},
		methods: {
			getVen() {
				getVenue().then(response => {
					const {
						data
					} = response
					var activities = [{
						id: 0,
						name: '全部'
					}]
					this.activities = activities.concat(data)
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			markClick(index) {
				if (this.search.mark !== index) {
					this.search.mark = index
					this.listChange()
				}
			},
			checkClick() {
				this.search.checkbox = !this.search.checkbox
				this.listChange()
			},
			listChange() {
				this.listQuery.page = 1
				this.getList()
			},
			getLastThreeMonthDate(index) {
				// 今天的时间
				var end = new Date()
				var year = end.getFullYear()
				var month = end.getMonth() + 1 // 0-11表示 1-12月
				var day = end.getDate()
				var dateObj = {}
				dateObj.start = null
				dateObj.end = year + '-' + month + '-' + day
				var endMonthDay = new Date(year, month, 0).getDate() // 当前月的总天数
				if (index === 0) {
					if (day - 7 <= 0) { // 如果在当月7日之前
						const startMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate() // 1周前所在月的总天数
						if (month - 1 <= 0) { // 如果在当年的1月份
							dateObj.start = (year - 1) + '-' + 12 + '-' + (31 - (7 - day))
						} else {
							dateObj.start = year + '-' + (month - 1) + '-' + (startMonthDay - (7 - day))
						}
					} else {
						dateObj.start = year + '-' + month + '-' + (day - 7)
					}
				} else {
					if (month - index <= 0) { // 如果是1、2、3月，年数往前推一年
						const start3MonthDay = new Date((year - 1), (12 - (index - parseInt(month))), 0)
							.getDate() // 3个月前所在月的总天数
						if (start3MonthDay < day) { // 3个月前所在月的总天数小于现在的天日期
							dateObj.start = (year - 1) + '-' + (12 - (index - month)) + '-' + start3MonthDay
						} else {
							dateObj.start = (year - 1) + '-' + (12 - (index - month)) + '-' + day
						}
					} else {
						const start3MonthDay = new Date(year, (parseInt(month) - index), 0).getDate() // 3个月前所在月的总天数
						if (start3MonthDay < day) { // 3个月前所在月的总天数小于现在的天日期
							if (day < endMonthDay) { // 当前天日期小于当前月总天数,2月份比较特殊的月份
								dateObj.start = year + '-' + (month - index) + '-' + (start3MonthDay - (endMonthDay - day))
							} else {
								dateObj.start = year + '-' + (month - index) + '-' + start3MonthDay
							}
						} else {
							dateObj.start = year + '-' + (month - index) + '-' + day
						}
					}
				}
				this.search.start = dateObj.start
				this.search.end = dateObj.end
			},
			timeClick(index) {
				if (index !== this.search.time) {
					this.search.time = index
					this.getLastThreeMonthDate(index)
				}
			},
			getList() {
				this.listLoading = true
				this.list = []
				this.total = 0
				this.listLoading = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.limit-filter {
		position: relative;
		padding: 15px 0 5px 30px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
	}

	.time-group span {
		float: left;
		width: 74px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border: 1px solid #d9d9d9;
		margin-left: -1px;
		position: relative;
	}

	.time-group span:first-child {
		border-radius: 4px 0 0 4px;
	}

	.time-group span:last-child {
		border-radius: 0 4px 4px 0;
	}

	.curr {
		border: 1px solid #6b7cdd;
		color: #6b7cdd;
		z-index: 2;
	}

	.curr1 {
		color: #6b7cdd;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.course-evaluate-statistics {
		margin: 15px 0 20px;
		padding: 15px 25px;
		border: 1px solid #d9d9d9;
		font-size: 12px;
	}

	.evaluate-list {
		padding-bottom: 18px;
		margin-bottom: 20px;
		border-bottom: 1px solid #d9d9d9;
	}

	.avatar {
		width: 72px;
		height: 72px;
		margin-bottom: 6px;
		border-radius: 4px;
		overflow: hidden;
	}

	.comment {
		min-height: 30px;
		margin-bottom: 10px;
		line-height: 1.5;
		word-wrap: break-word;
	}
</style>